<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <style>
        .layui-edge{
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-fluid main">
    <fieldset class="layui-elem-field site-demo-button" style="width: 1500px;margin-top: 15px;border:0;float: left;">
        <form class="layui-form search" action="{:url('admin/hotel/didaIndex')}" method="post">
            <div style="width: 550px;margin-top: 15px;border:0;float: left;">
                <div class="layui-form-item" style="float: left;">
                    <div style="width:100%;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>目的地：</p>
                        </div>
                        <div class="layui-input-inline" style="width:400px;">
                            <select id="CityName" name="CityName" lay-filter="CityName" lay-search>
                                <option value="">请输入城市名称</option>
                                {notempty name="$wherelist.CityName"}
                                <option {notempty name='$wherelist.CityCode'}{if $wherelist.CityCode!=''} selected{/if}{/notempty} value="{$wherelist.CityCode}">{$wherelist.CityName}</option>
                                {/notempty}
                            </select>
                        </div>
                    </div>
                    <div style="width:100%;margin-top:10px;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>酒店名称：</p>
                        </div>
                        <div class="layui-input-inline" style="width:400px;">
                            <select id="HotelName" name="HotelName" lay-filter="HotelName" lay-search>
                                <option value="">请输入酒店名称</option>
                                {notempty name="$wherelist.HotelName"}
                                <option {notempty name='$wherelist.HotelID'}{if $wherelist.HotelID!=''} selected{/if}{/notempty} value="{$wherelist.HotelID}">{$wherelist.HotelName}</option>
                                {/notempty}
                            </select>
                        </div>
                    </div>
                    <div style="width:100%;margin-top:10px;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>入住日期：</p>
                        </div>
                        <div class="layui-input-inline" style="width:400px;">
                            <input name="arrivalDate" value="{if isset($wherelist['arrivalDate'])}{$wherelist['arrivalDate']}{/if}"  id="arrivalDate" placeholder="入住日期" autocomplete="off" class="layui-input" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 900px;margin-top: 15px;border:0;float: left;">
                <div class="layui-form-item" style="float: left;">
                    <div style="width:35%;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>房间数：</p>
                        </div>
                        <div class="layui-input-inline" style="width:120px;">
                            <input type="number" id="NumberOfRooms" name="NumberOfRooms" autocomplete="off" value="{if isset($wherelist['NumberOfRooms'])}{$wherelist['NumberOfRooms']}{else}1{/if}" lay-verify="NumberOfRooms" placeholder="房间数" class="layui-input layui-btn-sm">
                        </div>
                    </div>

                    <div style="width:65%;float:left;">
                        <div class="layui-input-inline" style="width:100px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>床型：</p>
                        </div>
                        <div class="layui-input-inline" style="width:120px;">
                            <select id="bedType" name="bedType" lay-filter="bedType">
                                <option value="0">不限</option>
                                <option value="1" {notempty name='$wherelist.bedType'}{if $wherelist.bedType=="1"} selected{/if}{/notempty}>大床</option>
                                <option value="2" {notempty name='$wherelist.bedType'}{if $wherelist.bedType=="2"} selected{/if}{/notempty}>双床</option>
                            </select>
                        </div>
                    </div>

                    <div style="width:100%;margin-top:10px;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>成人：</p>
                        </div>
                        <div class="layui-input-inline" style="width:120px;">
                            <input type="number" id="adult" name="adult" autocomplete="off" value="{if isset($wherelist['adult'])}{$wherelist['adult']}{else}1{/if}" lay-verify="adult" placeholder="成人" class="layui-input layui-btn-sm">
                        </div>
                    </div>

                    <div style="width:35%;margin-top:10px;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>儿童：</p>
                        </div>
                        <div class="layui-input-inline" style="width:120px;">
                            <input id="child" onchange="setChild(this.value)" type="number" name="child" autocomplete="off" value="{if isset($wherelist['child'])}{$wherelist['child']}{else}0{/if}" lay-verify="child" placeholder="儿童" class="layui-input layui-btn-sm">
                        </div>
                    </div>

                    <div id="childAgeDiv" style="width:65%;margin-top:10px;float:left;{if isset($wherelist['child']) && $wherelist['child']==0}display:none;{/if}">
                        <div class="layui-input-inline" style="width:100px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>儿童年龄：</p>
                        </div>
                        <div class="layui-input-inline" style="width:75%;">
                            <input id="childAgeArr" type="text" name="childAgeArr" autocomplete="off" value="{if isset($wherelist['child'])}{$wherelist['childAgeArr']}{/if}" lay-verify="childAgeArr" placeholder="请填写全部儿童年龄，用&隔开，例：12&15" class="layui-input layui-btn-sm">
                        </div>
                    </div>
                </div>
            </div>

            <div style="width: 500px;border:0;float: left;">
                <div style="width:100%;margin-top:10px;float:left;">
                    <button style="margin-bottom:10px;" class="layui-btn layui-btn-default layui-btn-sm" lay-submit="" lay-filter="serch" id="search">查询</button>
                </div>
            </div>

        </form>
    </fieldset>
    <table class="layui-table" lay-even="" lay-skin="line">
        <colgroup>
            <col width="7%">
            <col width="25%">
            <col width="7%">
            <col width="7%">
            <col width="10%">
            <col width="20%">
            <col width="15%">
            <col width="10%">
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>酒店名</th>
            <th>星级</th>
            <th>评分</th>
            <th>城市</th>
            <th>地址</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {if !empty($info)}
        {volist name="info" id="vo"}
        <tr>
            <td>{$vo.HotelID}</td>
            <td>{$vo.allName}</td>
            <td>{$vo.StarRating}星</td>
            <td>暂无</td>
            <td>{$vo.CountryCode}，{$vo.CityName}</td>
            <td>{$vo.allAddress}</td>
            <td>{$vo.Telephone}</td>
            <td>
                <a href="javascript:void(0);" data-id="{$vo.HotelID}" class="layui-btn layui-btn-xs layui-btn-warm priceSearchBtn" style="margin-right: 0;font-size:12px;">查价</a>
            </td>
        </tr>

        <tr>
            <td colspan="8" id="{$vo.HotelID}_price_td"></td>
        </tr>
        {/volist}
        {/if}

        </tbody>
    </table>


    <script src="__PUBLIC__/layui/layui.js"></script>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <script>
        layui.use(['layer', 'form', 'laydate'], function() {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                laydate = layui.laydate;

            laydate.render({
                istime: true,
                elem: '#arrivalDate' //指定元素
                // ,type: 'datetime'
                ,range: '~' //或 range: '~' 来自定义分割字符
            });

            var cpLock = true;
            var timeoutId = 0;
            function bindFunc(){
                //解决监听输入时中文输入法问题
                $("#CityName").parent().find(".layui-select-title input").on('compositionstart', function () {
                    cpLock = false;
                });
                $("#CityName").parent().find(".layui-select-title input").on('compositionend', function () {
                    cpLock = true;
                });
                $("#CityName").parent().find(".layui-select-title input").bind('input propertychange',function(){
                    var CityName = $(this).val();
                    clearTimeout(timeoutId);
                    timeoutId = setTimeout(function(){
                        showCityList(CityName);
                    },1000)

                });
                //点击时选中文本
                $("#CityName").parent().find(".layui-select-title input").attr("onfocus","this.select()");
            }
            bindFunc();
            function showCityList(CityName){
                setTimeout(function(){
                    if(cpLock) {
                        if (cpLock) {
                            var html="<option value=''>请输入城市名称</option>";
                            if(CityName!==''){
                                $.ajax({
                                    url:"{:url('admin/hotel/getDidaCityList')}",
                                    data:{'CityName':CityName},
                                    type:'post',
                                    async: false,
                                    success:function(data) {
                                        if(data.length>0){
                                            for(var i=0;i<data.length;i++){
                                                if(data[i]["CityName_CN"]!==''){
                                                    html += "<option value="+data[i]["CityCode"]+">"+data[i]["CityName_CN"]+"，"+data[i]["CityName"]+"</option>";
                                                }else{
                                                    html += "<option value="+data[i]["CityCode"]+">"+data[i]["CityName"]+"</option>";
                                                }
                                            }
                                            $("#CityName").html(html);
                                        }
                                    }
                                });
                            }

                            //重新渲染select
                            form.render('select');
                            bindFunc();
                            bindFunc1();

                            $("#CityName").next().addClass("layui-form-selected");
                            $("#CityName").next().find(".layui-input").focus();
                            $("#CityName").next().find(".layui-input").val(CityName);
                        }
                    }
                },1);
            }

            var cpLock1 = true;
            function bindFunc1(){
                //解决监听输入时中文输入法问题
                $("#HotelName").parent().find(".layui-select-title input").on('compositionstart', function () {
                    cpLock1 = false;
                });
                $("#HotelName").parent().find(".layui-select-title input").on('compositionend', function () {
                    cpLock1 = true;
                });
                $("#HotelName").parent().find(".layui-select-title input").bind('input propertychange',function(){
                    var HotelName = $(this).val();
                    showCityList1(HotelName);
                });
                //点击时选中文本
                $("#HotelName").parent().find(".layui-select-title input").attr("onfocus","this.select()");
            }
            bindFunc1();
            function showCityList1(HotelName){
                setTimeout(function(){
                    if(cpLock1) {
                        if (cpLock1) {
                            var html="<option value=''>请输入酒店名称</option>";
                            if(HotelName!==''){
                                $.ajax({
                                    url:"{:url('admin/hotel/getHotelNameList')}",
                                    data:{'HotelName':HotelName},
                                    type:'post',
                                    async: false,
                                    success:function(data) {
                                        if(data.length>0){
                                            for(var i=0;i<data.length;i++){
                                                if(data[i]["Name_CN"]!==''){
                                                    html += "<option value="+data[i]["HotelID"]+">"+data[i]["Name_CN"]+"，"+data[i]["Name"]+"</option>";
                                                }else{
                                                    html += "<option value="+data[i]["HotelID"]+">"+data[i]["Name"]+"</option>";
                                                }
                                            }
                                            $("#HotelName").html(html);
                                        }
                                    }
                                });
                            }

                            //重新渲染select
                            form.render('select');
                            bindFunc();
                            bindFunc1();

                            $("#HotelName").next().addClass("layui-form-selected");
                            $("#HotelName").next().find(".layui-input").focus();
                            $("#HotelName").next().find(".layui-input").val(HotelName);
                        }
                    }
                },1);
            }

        });

        //儿童数量
        function setChild(childNum){
            if(childNum>0){
                $("#childAgeDiv").show();
            }else{
                $("#childAgeDiv").hide();
                $("#childAgeArr").val('');
                $("#child").val(0);
            }
            return false;
        }

        $(".priceSearchBtn").click(function(){
            var HotelID = $(this).attr("data-id");
            var arrivalDate = $("#arrivalDate").val();
            var NumberOfRooms = $("#NumberOfRooms").val();
            var adult = $("#adult").val();
            var child = $("#child").val();
            var bedType = $("#bedType").val();
            var childAgeArr = $("#childAgeArr").val();

            console.log(HotelID);
            console.log(arrivalDate);
            console.log(NumberOfRooms);
            console.log(adult);
            console.log(child);
            console.log(childAgeArr);

            if(arrivalDate=='' || arrivalDate==undefined){
                layer.msg('请选择入住时间！');return false;
            }
            var loading = layer.load(2);
            $.ajax({
                url:"{:url('admin/hotel/searchPrice')}",
                data:{'HotelID':HotelID,'arrivalDate':arrivalDate,'NumberOfRooms':NumberOfRooms,'adult':adult,'child':child,'bedType':bedType,'childAgeArr':childAgeArr},
                type:'post',
                success:function(res) {
                    layer.close(loading);
                    console.log(res);
                    if(res.msg=='OK'){
                        var data = res.data;
                        var html = '<table class="layui-table" lay-skin="line">';

                        html += '<colgroup>' +
                            '<col width="20%">' +
                            '<col width="7%">' +
                            '<col width="7%">' +
                            '<col width="7%">' +
                            '<col width="20%">' +
                            '<col width="7%">' +
                            '<col width="7%">' +
                            '<col width="15%">' +
                            '<col width="8%">' +
                            '</colgroup>';

                        for(var i=0;i<data.length;i++){
                            var priceData = data[i];
                            html += '<tr>' +
                                '<td>'+priceData.RatePlanName+'</td>' +
                                '<td>'+priceData.BedType+'</td>' +
                                '<td>'+priceData.BreakfastType+'</td>' +
                                '<td>剩余'+priceData.InventoryCount+'间</td>' +
                                '<td>'+priceData.RatePlanCancellationPolicyStr+'</td>' +
                                '<td>标住'+priceData.StandardOccupancy+'人</td>' +
                                '<td>最多住'+priceData.MaxOccupancy+'人</td>' +
                                '<td>'+priceData.PriceStr+'</td>' +
                                '<td>总价：'+priceData.TotalPrice+'</td>' +
                                '</tr>';
                        }

                        html += '</table>';
                    }else{
                        html = res.msg;
                    }

                    $("#"+HotelID+"_price_td").html(html);
                    return false;
                }
            });





        });



    </script>


</body>
</html>
